<template>
  <p class="page-today-time">{{ page.time }}</p>
  <div class="page">
    <a-row>
      <a-col>
        <div class="page-title">今日资产</div>
        <div class="page-button">
          <a-button type="primary" @click="today.showInput = true"
            >输入</a-button
          >
        </div>
      </a-col>

      <inputToday
        v-if="today.showInput"
        :data="today.data"
        @confirm="today.confirm"
        @cancel="today.cancel"
      />
    </a-row>
  </div>
</template>

<script setup>
import { reactive } from "@vue/reactivity";
import inputToday from "../components/input-today";
import { getTimeFormat } from "@/utils/time";
import { onBeforeUnmount } from "@vue/runtime-core";

const page = reactive({
  time: null,
  timer:null,
  initTime:function(){
    page.timer = setInterval(() => {
      page.time = getTimeFormat(new Date(), "yyyy-MM-dd HH:mm:ss")
    }, 1000);
  },
  destroyTimer:function(){
    clearInterval(page.timer)
  }
});

const today = reactive({
  showInput: false,
  data: {
    time: "2022/10/27",
    // _zhaohang: "-10000",
    // _meituan: "-17000",
    // _weilidai: "0",
    zhaohang: "1148.8",
    jianhang: "1.58",
    weixin: "0",
    zhifubao: "0",
    // _beiyongjin: "0",
    _baitiao: "-1408.58",
    // _jintiao: "-8068.6",
    // _meituanlianmingxinyongka: "-4991.03",
    total: "-258.2",
  },
  confirm: function (data) {
    today.showInput = false;
    console.log(data);
  },
  cancel: function () {
    today.showInput = false;
  },
});
page.initTime()
onBeforeUnmount(()=>{
  page.destroyTimer()
})
</script>

<style scoped>
.page-today-time {
  font-size: 40px;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 30px;
}
.page {
  margin-left: 60px;
}
.page-title {
  margin: 10px 0;
  border-left: 3px solid #3f5fff;
  padding-left: 15px;
  font-size: 24px;
}

.page-button {
  margin: 30px 0 0 30px;
}
</style>